import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
import { View, Image, Text, Input } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'

export default function VipCard(props) {
  const [filters,setFilters] = useState({
    page:1,
    pageSize:10
  })
  const [moreStatus,setMoreStatus] = useState('more')
  const [recommendList,setRecommendList] = useState([1])
  const [showMore, setshowMore] = useState(false)
  const [lists,setLists] = useState([])
  useDidShow(()=>{
    _initData()
    Taro.$get('/cinema-app/api/dx/card',{
      cinemaId:Taro.getStorageSync('merchantId')
    }).then(res=>{
      if(res.code == '1'){
        setRecommendList(res.content)
      }
    })
  })
  useReachBottom(()=>{
    if(filters.totalCount > lists.length){
      _initData({page:filters.page+1},data=>{
        setLists([...lists,...data?.list])
      })
    }else{
      setMoreStatus('no-more')
    }
  })
  const _initData = (e,func)=>{
    const data = {
      page:filters.page,
      pageSize:filters.pageSize,
      ...e
    }
    Taro.showLoading({title:'加载中...'})
    Taro.$post('/cinema-app/api/card/getMyGiftCardPageList',data,'1').then(res=>{
      if(res.code == '1'){
        setFilters({...filters,totalCount:res.content?.pagination?.totalCount})
        if(func){
          func(res.content)
          return;
        }
        setLists(res.content?.list)
      }
    })
  }
  return (
    <View className='vip-card'>
      <View className="container">
        <View className="title">我的卡({lists.length}张)</View>
        {lists.length > 0 ? (
          <View className="vip-group">
            {lists.slice(0, showMore?lists.length:3).map((item, idx) => (
                <View className="list-item valid" key={item.cardNo} style={{background:item.backgroundType=='1'?item.backgroundContent:`url(${item.backgroundContent})`}} onClick={()=>{
                  Taro.navigateTo({
                    url:`/mineSubPack/card-detail/index?id=${item.id}&isDxCard=${item.isDxCard}`
                  })
                }}>
                  <View className="item-header">
                    <Image className='header-img' src={Taro.getStorageSync('appConfig')?.iconUrl || require('@/images/mine/logo.png')} mode='aspectFill'></Image>
                    <View className='header-info'>
                      <View className="info-h2">{item.cardName}</View>
                      <View className="info-p">{item.cardNo}</View>
                    </View>
                  </View>
                  <View className="item-desc">
                    <View>{item.typeDesc}</View>
                    <View><Text style={{fontWeight:400}}>余额：¥</Text>{item.amount}</View>
                  </View>
                </View>
              )
            )}
            {showMore?null:<View className="more" onClick={e=>{setshowMore(true)}}>查看全部电影卡 ({lists.length}张)</View>}
          </View>
        ):
        <View className="no-coupon">
          <View className='no-header'>你暂时还没有电影卡哦~</View>        
        </View>}
      </View>
      <View className="container">
        {(!lists.length) && recommendList.length?<>
        <View className="no-title">推荐开通电影卡，畅享购票优惠！</View>
        {recommendList.map(item=>{
          return <View className="list-item" key={item.cardNo} style={{background:item.cardStyle=='1'?item.cardColour:`url(${item.cardUrl})`}} onClick={()=>{
            Taro.navigateTo({
              url:`/mineSubPack/open-card/index?cardId=${item.id}`
            })
          }}>
          <View className="item-header">
            <Image className='header-img' src={Taro.getStorageSync('appConfig')?.iconUrl || require('@/images/mine/logo.png')}></Image>
            <View className='header-info'>
              <View className="info-h2">{item.levelName}</View>
            </View>
            <View className="header-button">立即开通</View>
          </View>
          <View className="item-desc">
            <View className="desc-p">{item.cardTypeDesc} <Text style={{fontSize:'12PX',opacity:.8}}>{item.recommend}</Text></View>
            <View></View>
          </View>
        </View>
        })}
        </>:null}
        <View className="card-tabs">
          <View className="tabs-item" onClick={()=>{
            Taro.navigateTo({
              url:'/mineSubPack/card-bind/index'
            })
          }}>
            <Image src={require('@/images/mine/bidding-card.svg')} className='item-img'></Image>
            绑定电影卡
          </View>
          <View className="line">|</View>
          <View className="tabs-item" onClick={()=>{
            Taro.navigateTo({
              url:`/mineSubPack/open-card/index`
            })
          }}>
            <Image src={require('@/images/mine/new-card.svg')} className='item-img'></Image>
            购买电影卡
          </View>
        </View>
      </View>
    </View>
  )
}